<!DOCTYPE html>

% # variables:
% #   bookshelf, mode

% import lonote.translate
% g = lonote.translate.get_gettext_func()

% import xml.etree.ElementTree as ET

% title = g('Bookshelf of LoNote')
% if mode == 'html':
    % sub_title = g('(Html Mode)')
% elif mode == 'raw':
    % sub_title = g('(Raw Mode)')
% else:
    % sub_title = g('(Standard Mode)')
% end

<html lang="">
    <head>
        <meta charset="utf-8" />
        <title>{{title}}</title>
        <meta name="description" content="{{title}}" />
        <script src="/static/js/jquery-1.9.1.js"></script>
        <script src="/static/js/jquery-ui-1.10.2.custom.min.js"></script>
        <script src="/static/js/lonote.js"></script>
        <script src="/static/js/shortcut.js"></script>

        <link rel="stylesheet" href="/static/css/jqueryui-default/jquery-ui-1.10.2.custom.min.css" />
        <link rel="stylesheet" href="/static/css/default.css" />

        <style>
            body {
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                background-color: #FFE;
                font-family: "Georgia", "Times New Roman", "Droid Sans", sans-serif;
            }

            #index_content ul, #index_content li {
                padding: 4px;
                margin: 3px;
                list-style: none;
                overflow-y: auto;
            }

            #index_content ul ul {
                margin-left: 1.5em;
            }
            
            #index_content li.leaf {
                padding-left: 20px; /* padding 4px + icon size 16px*/
            }
            
/*
            li.leaf::before{
                background-size: 16px 16px;
                height: 16px;
                width: 16px;
                content: '　';
            }
*/

            input[type=checkbox] {
                display: none;
            }

            input[type=checkbox] + label {
                vertical-align:middle;
                background-image: url('/static/icon/other/plus.svg');
                background-size: 16px 16px;
                height: 16px;
                width: 16px;
                display: inline-block;
                padding: 0 0 0 0px;
            }

            input[type=checkbox]:checked + label {
                background-image: url('/static/icon/other/minus.svg');
            }

            input[type=checkbox] ~ ul {
                display: none;
            }

            input[type=checkbox]:checked ~ ul {
                display: block;
            }

            #index_content a {
                vertical-align: middle;
                text-decoration: none;
                margin: 2px;
            }

            .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

            .res-notify-icon {
                width: 18px;
                vertical-align: middle;
            }

            .res-notify {
                vertical-align: middle;
                border: gray 1px solid;
                border-radius: 2px;
                background: #fff;
                float: right;
            }


            #index_content {
                border: none;
                overflow-y: auto;
                overflow-y: visible;
                min-height: 100%;
            }

            .title {
                font-size: 2.0em;
                font-family: "Century Schoolbook L", "Times New Roman", "Droid Sans", serif;
                text-shadow: 0.1em 0.05em 0.1em #AAA;            
            }

        </style>


    </head>

    <body>
        <div id="content_column">
            <header>
                <div style="display: inline-block;">
                    <h1 class="page_title">{{title}}
                        <span style="display: inline-block; width: 100px;"></span>
                    </h1>
                    <br/>
                        <p class="sub_title"> {{sub_title}} </p>
                </div>
            </header>

            <article id='index_content'>
                % if len(bookshelf.books) >= 1:
                    <ul>
                    % for buuid, book in bookshelf.books.items():
                        % include index_item book = book, eroot = ET.fromstring(book.book_xml()), bookuuid = buuid, max_level = 10000, mode = mode
                    % end
                    </ul>
                % else:
                    <img src="/static/lo/lo_1_awkward_1.png" style="float: left;"/>
                    <p><br/></p>
                    <p>{{!g('Sorry, No book available.')}}</p>
                    <p>{{!g('Please go to <a href="/config">Configure Page</a> and load (or create) some books first.')}}</p>
                % end
            </article>
        </div>

        <!-- sidebar -->
        {{!sidebar}}
        <!--
        <aside id="sidebar">
            <ul class="menuroot">
                <li><a href="/last" title="Back to the note page which your browsing before." target="">Back<span class="notify"><img class="icon" src="/static/icon/sidebar/move.svg"></span></a>
            </ul>

            <hr/>

            <ul class="menuroot">
                % def get_class(it, mode):
                    % if it == 'html' and mode == 'html':
                        % return 'target'
                    % elif it == 'raw' and mode == 'raw':
                        % return 'target'
                    % elif it == 'standard' and (not mode == 'raw') and (not mode == 'html'):
                        % return 'target'
                    % else:
                        % return ''
                    % end
                % end
                <li><a href="index" title="" class="{{get_class('standard', mode)}}">Standard Mode</a>
                <li><a href="index?mode=html" title="" class="{{get_class('html', mode)}}">Html Mode</a>
                <li><a href="index?mode=raw" title="" class="{{get_class('raw', mode)}}">Raw Mode</a>
            </ul>
        </aside>
        -->

    </body>

    <script>
    //     // 排序
    //     shortcut.add("F7",function(){
    //         var progressbar = $('<div></div>');
    //         progressbar.progressbar({ value: false });
    //         var dialog = $('<div>Move Initializing...</div>').append(progressbar).dialog({minHeight:0, show: 250, hide: 250});
    //         $(".ui-dialog-titlebar").hide();

    //         setTimeout(function(){
    //             $(".sortable" ).sortable({
    //                 connectWith: ".sortable",
    //                 placeholder: "sortable-placeholder"
    //             }).disableSelection();

    //             dialog.dialog('close');
    //         }, 250);

    //     });
    </script>

    <script>
        // 新定義的函式
        function restore_checked(){
            var index_checkbox_checked = JSON.parse(
                localStorage['index_checkbox_checked']);
            for (x in index_checkbox_checked){
                $('#index_content input[id=' + index_checkbox_checked[x] + ']').attr('checked', 'checked');
            }
        }

        function save_checked(){
            var index_checkbox_checked = new Array();
            $('#index_content input:checked').each(function(){
                index_checkbox_checked.push($(this).attr('id'));
            });
            localStorage['index_checkbox_checked'] = JSON.stringify(
                index_checkbox_checked);
        }

        // 運用
        $(document).ready(function(){
            restore_checked();
            lo.scr.restore();
            $('#index_content').focus();
            lo.key.search_ready();
        })

        $(window).blur(function(){
            save_checked();
            lo.scr.save();
        });

        $(window).on('beforeunload',function(){
            save_checked();
            lo.scr.save();
        });
    </script>

    <script>
        $(document).tooltip({
            show: { effect: "blind", direction: 'up', duration: 200 },
            hide: { effect: "blind", direction: 'up', duration: 100 },
            position: { my: "left+15 top+15", at: "left bottom", collision: "flipfit" },
            content: function() {
                var title = $(this).attr('title');
                var her = $(this).parents().find('> a')
                            .map(function(){return this.text})
                            .get();
                here_text = her.pop();
                var her_string = '';
                var ans = '';

                if (her.length != 0){
                    her_string = ' ← ' + her.reverse().join(' ← ');
                    ans = '<b>' + here_text + '</b><span style="font-size: smaller">' + her_string + '</span><hr/>' + title;
                } else {
                    ans = title;
                }
                return ans;
            }
        });
    </script>

    <script>
        shortcut.add("F4",function(){
            location.assign('/last');
        });
    </script>

</html>
